{% extends 'base.html' %}

{% block title %}分析错题{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">分析错题</h1>
    <div class="card">
        <div class="card-body">
            <form id="analyzeForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="mistakeImage" class="form-label">上传错题图片</label>
                    <input type="file" class="form-control" id="mistakeImage" name="mistakeImage" accept="image/*" required>
                </div>
                <button type="submit" class="btn btn-primary">分析错题</button>
            </form>
            <div id="analysisResult" class="mt-4 d-none">
                <h3>分析结果</h3>
                <div id="resultContent"></div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $('#analyzeForm').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: '{% url "core:analyze_mistake" %}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.status === 'success') {
                    $('#analysisResult').removeClass('d-none');
                    $('#resultContent').text(response.message);
                }
            },
            error: function() {
                alert('分析出错，请重试。');
            }
        });
    });
});
</script>
{% endblock %}